{% load mezzanine_tags i18n %}
<style>
.mezz-fb-thumbnail {display:inline; margin-left:5px !important;}
.mezz-fb-thumbnail img {width:20px; height:20px; margin-top:0 !important;}
.vFileBrowseField {display:none;}
</style>
<input id="{{ final_attrs.id }}" type="text" class="vFileBrowseField" name="{{ final_attrs.name }}" value="{{ value }}" />
<a
  class="fb_show"
  href="javascript:void(0);"
  style="padding:5px 16px;"
  onclick="FileBrowser.show(
    jQuery(this).prev('input.vFileBrowseField').attr('id'),
    '{% url "fb_browse" %}?pop=1{% if final_attrs.directory %}&amp;dir={{ final_attrs.directory }}{% endif %}{% if final_attrs.format %}&amp;type={{ final_attrs.format }}{% endif %}'
  );">
    <img src="{{ final_attrs.search_icon }}" alt="" />
</a>
{% ifequal value.filetype "Image" %}
<p class="help mezz-fb-thumbnail" id="help_{{ final_attrs.id }}">
    <a href="{{ value.url }}" target="_blank" id="link_{{ final_attrs.id }}">
        <img id="image_{{ final_attrs.id }}" src="{{ MEDIA_URL }}{% thumbnail value.name 60 60 %}" class="preview" />
    </a>
</p>
{% else %}
<p class="help mezz-fb-thumbnail" id="help_{{ final_attrs.id }}">
    <a href="javascript://" target="_self" id="link_{{ final_attrs.id }}" style="display: none;">
        <img id="image_{{ final_attrs.id }}" class="preview" src="" />
    </a>
    {{ value.path }}
</p>
{% endifequal %}
{% if not self.is_required %}
    <p class="help mezz-fb-clear" id="clear_{{ final_attrs.id }}" style="display:{% if value %}inline{% else %}none{% endif %}; margin:0 10px;">
        <a href="javascript:FileBrowser.clear('{{ final_attrs.id }}');">{% trans "Clear" %}</a>
    </p>
{% endif %}
{% if final_attrs.DEBUG %}
<p>
    <strong>Path</strong> {{ value.path }}<br />
    <strong>FileType</strong> {{ value.filetype }}<br /><br />
    <strong>Directory</strong> {{ final_attrs.directory }}<br />
    <strong>Extensions</strong> {{ final_attrs.extensions }}<br />
    <strong>Format</strong> {{ final_attrs.format }}
</p>
{% endif %}
